<template>
  <a-modal
    :title="title"
    @close="close"
    :maskClosable="false"
    width="800px"
    :footer="null"
    :closable="false"
    :visible="state.visible"
    :body-style="{ paddingBottom: '80px' }"
  >
    <a-form ref="forms" :model="model" :rules="rules" layout="vertical">
      <a-row :gutter="10">
        <a-col :span="12" v-if="model.completeState === 1">
          <a-form-item :label="'当前任务节点'" name="nodeCode">
            <a-select
              show-search
              placeholder="请选择"
              style="width: 100%"
              v-model:value="model.nodeCode"
            >
              <a-select-option
                v-for="item in list"
                :key="item.nodeCode"
                :value="item.nodeCode"
              >
                {{ item.nodeName }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item :label="'处理人'" name="handler">
            <a-select
              show-search
              placeholder="请选择"
              style="width: 100%"
              v-model:value="model.initiator"
            >
              <a-select-option
                v-for="item in staffList"
                :key="item.id"
                :value="item.id"
              >
                {{ item.name }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <!-- <a-col :span="12" v-if="model.completeState === 1">
          <a-form-item :label="'下个任务节点'" name="nextNode">
            <a-select
              show-search
              placeholder="请选择"
              style="width: 100%"
              v-model:value="model.nextNode"
            >
              <a-select-option
                v-for="item in list"
                :key="item.nodeCode"
                :value="item.nodeCode"
              >
                {{ item.nodeName }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col> -->
        <a-col :span="12">
          <a-form-item :label="'开始时间'" name="initiationTime">
            <a-date-picker
              show-time
              :disabled-date="
                model.completeState === 0
                  ? disabledStartDate
                  : disabledCurrentDate
              "
              style="width: 100%"
              placeholder="开始时间"
              v-model:value="model.initiationTime"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12" v-if="model.completeState === 0">
          <a-form-item :label="'结束时间'" name="completeTime">
            <a-date-picker
              show-time
              :disabled-date="disabledEndDate"
              style="width: 100%"
              placeholder="结束时间"
              v-model:value="model.completeTime"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item>
            <div class="pr h60">
              <h4>
                <strong style="position: absolute; bottom: 3px"
                  >时长:{{ getDuration() }}</strong
                >
              </h4>
            </div>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item
            :label="'修改原因'"
            name="reason"
            :wrapper-col="{ span: 24 }"
            :label-col="{ span: 6 }"
          >
            <a-textarea
              placeholder="请输入"
              :rows="4"
              v-model:value="model.reason"
            />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <div
      :style="{
        position: 'absolute',
        bottom: 0,
        width: '100%',
        borderTop: '1px solid #e8e8e8',
        padding: '10px 16px',
        textAlign: 'right',
        left: 0,
        background: '#fff',
        borderRadius: '0 0 4px 4px'
      }"
    >
      <a-button style="margin-right: 8px" size="small" @click="close"
        >取消</a-button
      >
      <a-button type="primary" size="small" @click="onSubmit">保存</a-button>
    </div>
  </a-modal>
</template>

<script>
import form from '@/components/cupshe/mixin/form.js'
import { debounce } from 'lodash'
import { ref } from 'vue'
import {
  work_bench_get_process_config_post,
  work_bench_update_node_info_post
} from '@/server/modules/12142'
import { config_list_staff_post } from '@/server/modules/1890'
import dayjs from 'dayjs'
import moment from 'moment'
export default {
  name: 'addColor',
  mixins: [form],
  components: {},
  data() {
    return {
      title: '编辑',
      forms: ref(null),
      width: 900,
      isCompleted: false,
      staffList: [],
      menuList: [],
      formItemLayout: {
        labelCol: { span: 12 },
        wrapperCol: { span: 12 }
      },
      list: []
    }
  },
  //   created() {
  //     this.initMap()
  //   },
  methods: {
    // beforeOpen(data) {
    // },
    afterClose() {
      // console.log(this.formState)
    },
    disabledCurrentDate(current) {
      // Can not select days before today and today
      return current && current > moment().endOf('day')
    },
    disabledStartDate(current) {
      const endTime = this.model.completeTime
      if (endTime) {
        return current && current > endTime
      } else {
        return null
      }
    },
    changeType(option) {
      this.getDetail(option, this.model)
    },
    disabledEndDate(current) {
      const startTime = this.model.initiationTime
      if (startTime) {
        return current && current < startTime
      } else {
        return null
      }
    },
    getDuration() {
      const startTime = this.model.initiationTime
      let duration = ''
      if (this.model.completeState === 0) {
        const endTime = this.model.completeTime
        if (startTime && endTime) {
          const hours = dayjs(endTime).diff(dayjs(startTime), 'hours')
          const days = Math.floor(hours / 24)
          const hour = Math.floor(hours % 24)
          if (days) {
            duration = days + '天'
          }
          if (hour) {
            duration += hour + '小时'
          }
        }
      } else {
        if (startTime) {
          const endTime = Date.now()
          const hours = dayjs(endTime).diff(dayjs(startTime), 'hours')
          const days = Math.floor(hours / 24)
          const hour = Math.floor(hours % 24)
          if (days) {
            duration = days + '天'
          }
          if (hour) {
            duration += hour + '小时'
          }
        }
      }
      return duration || '0小时'
    },
    afterOpen(data) {
      this.model = {
        ...data,
        reason: ''
      }
      this.model.initiationTime = moment(this.model.initiationTime)
      if (this.model.completeTime) {
        this.model.completeTime = moment(this.model.completeTime)
      } else {
        this.model.completeTime = null
      }

      console.log(this.model)
      //   this.isCompleted = isCompleted
      config_list_staff_post({}).then(({ success, data }) => {
        if (success) {
          this.staffList = data.list
        }
      })
      this.getDetail(this.model.type, this.model)
      // work_bench_node_cp_count_post({ nodeType: 1 }).then(
      //   async ({ success, data }) => {
      //     if (success) {
      //       this.menuList = data
      //       this.model = {
      //         ...this.model,
      //         type: data[0].type
      //       }

      //     }
      //   }
      // )
    },

    getDetail(type, data) {
      work_bench_get_process_config_post({
        proofFlowType: data.proofFlowType,
        cp: data.cp,
        type
      }).then(({ success, data }) => {
        if (success) {
          this.list = data
        }
      })
    },

    async updateRequest(values) {
      console.log('values', values)
      // const data = { ...values }
      // console.log(data)
      // if (values.completeState === 0) {
      //   /// 已完成
      //   if (!values.completeTime) {
      //     this.$notification.error({
      //       message: '请选择结束时间'
      //     })
      //     return
      //   }
      // } else {
      //   if (!values.nextNode) {
      //     this.$notification.error({
      //       message: '请选择下一节点'
      //     })
      //     return
      //   }
      // }

      // if (!values.reason) {
      //   this.$notification.error({
      //     message: '请输入修改意见'
      //   })
      //   return
      // }
      const data = {
        id: values.id,
        currentNode: values.nodeCode,
        handler: values.initiator,
        nextNode: values.nextNode,
        initiationTime: moment(values.initiationTime).format(
          'YYYY-MM-DD HH:mm:ss'
        ),
        type: this.model.type,
        reason: values.reason,
        completeTime: values.completeTime
          ? moment(values.completeTime).format('YYYY-MM-DD HH:mm:ss')
          : this.model.completeTime
      }
      // if (this.model.completeState === 0) {
      return work_bench_update_node_info_post(data)
      // } else {
      //   const bodyData = {
      //     cp: this.model.cp,
      //     currentHandler: values.initiator || this.model.initiator,
      //     handler: values.initiator || this.model.initiator,
      //     currentNode: values.nodeCode || this.model.nodeCode,
      //     message: values.reason,
      //     nextNode: values.nextNode,
      //     proofFlowType: this.model.proofFlowType
      //   }
      //   return work_bench_update_node_info_post(bodyData)
      // }

      // return material_bulk_sheet_confirmColor_config_add_post(data)
      //   return (await data.id)
      //     ? cs_bms_information_edit_post(data)
      //     : cs_bms_information_save_post(data)
    }
  },
  setup() {
    const rules = {
      nodeCode: [
        {
          required: true,
          message: '请选择当前任务点'
        }
      ],
      nextNode: [
        {
          required: true,
          message: '请选择下一节点'
        }
      ],
      reason: [
        {
          required: true,
          message: '请填写原因'
        }
      ]
    }
    return {
      rules,
      debounce
    }
  }
}
</script>
<style scoped>
::v-deep .cooperation-item .ant-form-item {
  margin-bottom: 0 !important;
}
.title {
  color: rgba(0, 0, 0, 0.85);
  font-family: PingFang SC;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 22px;
  margin-left: 8px;
}
.close-icon {
  cursor: pointer;
}
</style>
